<script setup>
const props = defineProps({
  active: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div class="time-line">
    <div class="line">
      <span class="round" :class="{ active }"></span>
      <span class="vertical-line"></span>
    </div>
    <div class="info" :class="{ active }">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.time-line {
  display: flex;
  // &:first-child {
  //   .line {
  //     .round {
  //       background: #1dbf73;
  //       border: 1px solid #1dbf73;
  //     }
  //   }
  //   .info {
  //     color: #191e28;
  //   }
  // }
  &:last-child {
    .line {
      .vertical-line {
        border: none;
      }
    }
    .info {
      margin-bottom: 0;
    }
  }
  .line {
    flex: 0 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 8px;
    .round {
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      border: 1px solid #e3e4e5;
      margin-top: 3px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      &.active {
        background: #1dbf73;
        border: 1px solid #1dbf73;
      }
      &:after {
        display: block;
        content: "";
        width: 9px;
        height: 9px;
        border: 1px solid #fff;
        border-radius: 50%;
      }
    }
    .vertical-line {
      flex: 1;
      width: 1px;
      border-right: 1px dashed #e3e4e5;
      position: relative;
      left: -1px;
    }
  }
  .info {
    color: rgba(25, 30, 40, 0.48);
    flex: 1;
    padding-bottom: 20px;
    &.active {
      color: #191e28;
    }
  }
}
</style>